<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"  %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
	
	<div class="main-content">
				<!-- #section:basics/content.breadcrumbs -->
				<div class="breadcrumbs" id="breadcrumbs">
					<script type="text/javascript">
						try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
					</script>

					<ul class="breadcrumb">
						<li>
							<i class="ace-icon fa fa-home home-icon"></i>
							<a href="#">Home</a>
						</li>

						<li>
							<a href="#">Tables</a>
						</li>
						<li class="active">Simple &amp; Dynamic</li>
					</ul><!-- /.breadcrumb -->

					<!-- #section:basics/content.searchbox -->
					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon">
								<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
								<i class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
						</form>
					</div><!-- /.nav-search -->

					<!-- /section:basics/content.searchbox -->
				</div>

				<!-- /section:basics/content.breadcrumbs -->
				<div class="page-content">
					<!-- #section:settings.box -->
					<div class="ace-settings-container" id="ace-settings-container">
						<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
							<i class="ace-icon fa fa-cog bigger-150"></i>
						</div>

						<div class="ace-settings-box clearfix" id="ace-settings-box">
							<div class="pull-left width-50">
								<!-- #section:settings.skins -->
								<div class="ace-settings-item">
									<div class="pull-left">
										<select id="skin-colorpicker" class="hide">
											<option data-skin="no-skin" value="#438EB9">#438EB9</option>
											<option data-skin="skin-1" value="#222A2D">#222A2D</option>
											<option data-skin="skin-2" value="#C6487E">#C6487E</option>
											<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
										</select>
									</div>
									<span>&nbsp; Choose Skin</span>
								</div>

								<!-- /section:settings.skins -->

								<!-- #section:settings.navbar -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
									<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
								</div>

								<!-- /section:settings.navbar -->

								<!-- #section:settings.sidebar -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
									<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
								</div>

								<!-- /section:settings.sidebar -->

								<!-- #section:settings.breadcrumbs -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
									<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
								</div>

								<!-- /section:settings.breadcrumbs -->

								<!-- #section:settings.rtl -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
									<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
								</div>

								<!-- /section:settings.rtl -->

								<!-- #section:settings.container -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
									<label class="lbl" for="ace-settings-add-container">
										Inside
										<b>.container</b>
									</label>
								</div>

								<!-- /section:settings.container -->
							</div><!-- /.pull-left -->

							<div class="pull-left width-50">
								<!-- #section:basics/sidebar.options -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" />
									<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" />
									<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" />
									<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
								</div>

								<!-- /section:basics/sidebar.options -->
							</div><!-- /.pull-left -->
						</div><!-- /.ace-settings-box -->
					</div><!-- /.ace-settings-container -->

					<!-- /section:settings.box -->
					<div class="page-content-area">
						<div class="page-header">
							<h1>
								已参考的科目
								<small>
									<i class="ace-icon fa fa-angle-double-right"></i>
									Subject Message
								</small>
							</h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
										
										<!-- <div class="row">
												<div class="col-xs-6">
													<button type="button" class="btn btn-primary" id="bath_add_Btn">
													  <span class="glyphicon glyphicon-plus" aria-hidden="true">批量增加</span>
													</button>
												</div>
										</div> -->
										
										
										<table id="sample-table-1" class="table table-striped table-bordered table-hover">
											<thead>
												<tr>
													<th>课程编号</th>
													<th>课程名</th>
													<th>课程描述</th>
													<th>测试的次数</th>
													<th>考试的总时间</th>
													<th>满分总分</th>
													<th>是否开课</th>
													<th>得分</th>
													<th>是否参考</th>
													<th>操作</th>
												</tr>
											</thead>

											<tbody>
											<c:forEach items="${subList}" var="sub">
													<tr>
														<td>${sub.subId }</td>
														<td>${sub.name }</td>
														<td>${sub.description }</td>
														<td>${sub.testCount }</td>
														<td>${sub.totalTime }</td>
														<td>${sub.totalScore }</td>
														
														<c:if test="${sub.status==0 }">
															<td>
																<input name="switch-field-1" subid="${sub.subId }" class="ace ace-switch ace-switch-6 subject-status" type="checkBox"/>
																<span class="lbl"></span>
															</td>
														</c:if>
														<c:if test="${sub.status==1 }">
															<td>
																<input name="switch-field-1" checked="checked" subid="${sub.subId }" class="ace ace-switch ace-switch-6 subject-status" type="checkBox"/>
																<span class="lbl"></span>
															</td>
														</c:if>
														
														<c:if test="${sub.examScore.score>0 }">
															<td>${sub.examScore.score }</td>
														</c:if>
														<c:if test="${sub.examScore.score==0||sub.examScore==null }">
															<td>0.0</td>
														</c:if>
														
														
														<td>
															<c:choose>
																<c:when test="${sub.examScore==null }">
																	<label class="label label-success arrowed-in arrowed-in-right">未参考</label>
																</c:when>
																<c:otherwise>
																	<label class="label arrowed">以参考</label>
																</c:otherwise>
															</c:choose>
														</td>
														<td>
															<c:choose>
																<c:when test="${sub.examScore==null }">
																	<c:choose>
																		<c:when test="${sub.status==0 }">
																			<a title="进入考试" disabled="disabled" class="btn btn-success btn-xs"><i class="ace icon fa fa-pencil"></i></a>
																		</c:when>
																		<c:otherwise>
																			<button type="button" class="btn btn-primary btn-xs examTestBtn"  title="进入考试">
																				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
																			</button>
																		</c:otherwise>
																	</c:choose>
																</c:when>
																<%-- <c:when test="${empty sub.examScore.score&&sub.remainingE xamTime>0 }">
																	<a title="进入考试" href=""  class="btn btn-primary btn-xs"><i class="ace icon fa fa-pencil"></i></a>
																</c:when> --%>
																<c:otherwise>
																	<button type="button" class="btn btn-primary btn-xs showScore"   title="查看成绩">
																		<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
																	</button>
																</c:otherwise>
															</c:choose>
														
														</td>
													</tr>
												</c:forEach>
										 </tbody>
										</table>
										
										
									</div><!-- /.span -->
								</div><!-- /.row -->
							<!-- <div class="hr hr-18 dotted hr-double"></div>	 -->			
						</div><!--col-xs-12-->
					</div><!--row-->
				</div><!-- /.page-content-area -->
			</div><!-- /.page-content -->
		</div><!-- /.main-content -->
		
		
		<!-- 查看成绩 -->
		<div class="modal fade" tabindex="-1" role="dialog" id="showScoreModal">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">查看科目成绩</h4>
		      </div>
		      <div class="modal-body">
		        <p><label>用户名:</label><label id="userName"></label></p>
		        <p><label>科目:</label><label id="subjectName"></label></p>
		        <p><label>考试时间:</label><label id="examTime"></label></p>
		        <p><label>得分:</label><label id="score"></label></p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary" id="scorePrint">打印</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		<!-- 进入考试的 -->
		<div class="modal fade" tabindex="-1" role="dialog" id="examTestModal">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        	 <h4 align="center" class="modal-title" id="subName"></h4>
		        	 <span class="text-danger" id="testTimer"></span>
		      </div>
		      <div class="modal-body">
		        <form    method="post" id="examTest" >
		        	
		        </form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		       <button type="button" class="btn btn-primary sendAnswer">提交答案</button>
		      <!--  <a  class="btn btn-primary sendAnswer">提交答案</a> -->
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		<script type="text/javascript">
		//查看学生的分数
		$('.showScore').click(function(){
			var subject=$(this).parent().siblings().eq(1).text();
			var username=$("#user").text();		
			$.ajax({
				url:"${pageContext.request.contextPath }/stu/getScoreById",
				type:"POST",
				data:{
					subId:$(this).parent().siblings().eq(0).text()
				},
				success:function(result){
					$("#userName").text(username);
					$("#subjectName").text(subject);
					$("#examTime").text(result.map.ScoreList.examScore.examTime);
					$("#score").text(result.map.ScoreList.examScore.score);
					$("#showScoreModal").modal({
						backdrop:"static"
					});
				}
			})
		});
		
		
		//使用jq功能
		$('#scorePrint').click(function(){
			$('#showScoreModal .modal-body').jqprint();
		})
		
		//进入考试
		$('.examTestBtn').click(function(){
			var time=$('#testTimer').text();
			var subName=$(this).parent().siblings().eq(1).text();
			if(confirm("确认进入【"+subName+"】科目的考试吗？")){
			$("#subName").text(subName+"综合考试");
			$('#examTestModal .modal-body form').empty();
			$('#examTest').attr("action","");
			$.ajax({
				url:"${pageContext.request.contextPath }/stu/getExamTestById",
				type:"GET",
				data:"subId="+$(this).parent().siblings().eq(0).text(),
				success:function(result){
					//alert(result.message);
					$('#examTest').attr("action","assignment?subId="+result.map.subId);
					$.each(result.map.examTest,function(index,item){
						var div=$('<div></div>').addClass("form-group");
						var label=$("<label></label>").append(1+index+"、&nbsp;").append(item.content);
						var divCheckBoxA=$("<label></label>").addClass("checkbox col-md-offset-1");
						var divCheckBoxB=$("<label></label>").addClass("checkbox col-md-offset-1");
						var divCheckBoxC=$("<label></label>").addClass("checkbox col-md-offset-1");
						var divCheckBoxD=$("<label></label>").addClass("checkbox col-md-offset-1");
						var inputA=$('<input type="checkbox" name="test_'+item.id+'" value="A"/>');					
						var inputB=$('<input type="checkbox" name="test_'+item.id+'" value="B"/>');
						var inputC=$('<input type="checkbox" name="test_'+item.id+'" value="C"/>');
						var inputD=$('<input type="checkbox" name="test_'+item.id+'" value="D"/>');
						divCheckBoxA.append(inputA).append('&nbsp;&nbsp;&nbsp;A、'+item.chooseA);
						divCheckBoxB.append(inputB).append('&nbsp;&nbsp;&nbsp;B、'+item.chooseB);
						divCheckBoxC.append(inputC).append('&nbsp;&nbsp;&nbsp;C、'+item.chooseC);
						divCheckBoxD.append(inputD).append('&nbsp;&nbsp;&nbsp;D、'+item.chooseD);
						div.append(label).append(divCheckBoxA).append(divCheckBoxB)
										 .append(divCheckBoxC).append(divCheckBoxD);
						div.appendTo("#examTest");
					})
					//防止重新进去时再加一个时间
					if(time!=""){
						
					}else{
						startTime(7200);
					}
					$("#examTestModal").modal({
						backdrop:"static"
					})
				}
			});
		}	
	})
		
		
		function startTime(totalSecond){
			$('#testTimer').text("剩余时间："+formatTime(totalSecond));
			var timer=setInterval(function(){
				totalSecond--;
				if(totalSecond>=0){
					$('#testTimer').text("剩余时间："+formatTime(totalSecond));
				}else{
					alert('考试结束');
					clearInterval(timer);
					$('#examTest').submit();
				}
			},1000);
		}
		
		function formatTime(totalSecond){
			var hour=Math.floor(totalSecond/3600);
			var min=Math.floor((totalSecond%3600)/60);
			var second=totalSecond%60;
			hour=formatTimeNumber(hour);
			min=formatTimeNumber(min);
			second=formatTimeNumber(second);
			return hour+":"+min+":"+second;
		}

		function formatTimeNumber(timeNumber){
			if(timeNumber<10){
				return "0"+timeNumber;
			}else{
				return timeNumber;
			}
		}
		
		$('.sendAnswer').click(function(){
			if(confirm("确认提交试卷吗？")){
				$('#examTest').submit();
			}
		})
		</script>
		
		<c:if test="${not empty score && not empty subject }">
		<div class="modal fade" tabindex="-1" role="dialog" id="showSubScore">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">选课的课程</h4>
		      </div>
		      <div class="modal-body">
		      	<p>你的成绩为：</p>
		        <p>科目：</p><span>${subject.name }</span>
		        <p>成绩：</p><span>${score.examScore.score }</span>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	
			<script type="text/javascript">
			  $("#showSubScore").modal({
					backdrop:"static"
				});
			</script>
	</c:if>
</body>
</html>